<template>
  <div class="collection">
    <el-dialog
      :before-close="handelClose"
      :modal="false"
      :visible.sync="visible"
      width="900px"
      @close="handelClose"
    >
      <div slot="title">
        <b class="def-b">选择回收点</b>
      </div>
      <div class="ele-key-search" />
      <div class="ele-table">
        <el-table
          ref="collectionTable"
          v-loading="dialogShow"
          height="400"
          :data="collectionList"
          :header-cell-style="getRowClass"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column label="名称" prop="name" width="200" />
          <el-table-column label="城市" prop="cityName" />
        </el-table>
      </div>
      <div class="ele-footer">
        <div class="left">
          <el-button plain size="mini" @click="handelAllRow">全选</el-button>
          <el-button
            plain
            size="mini"
            @click="handelAllSelect"
          >添加</el-button>
        </div>
        <div class="right">
          <el-pagination
            :current-page="pages.pageIndex"
            :page-sizes="[20, 30, 40, 50]"
            :page-size="pages.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pages.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { recoveryList } from '@/api/customAPI/shop/recoveryManage'
export default {
  props: {
    visible: { type: Boolean, default: false },
    isSelect: {
      type: Boolean,
      default: false
    },
    storeId: {
      type: [Number, String],
      default: null
    }
  },
  data() {
    return {
      pages: { pageIndex: 1, pageSize: 20, total: 0 },
      collectionList: [],
      dialogShow: false,
      selectList: []
    }
  },
  watch: {
    visible(newValue, oldValue) {
      // this.dialogShow = newValue
    }
  },
  mounted() {
    this.loadding()
  },
  activated() {
    this.loadding()
  },
  methods: {
    /** 刷新 */
    refresh() {
      this.loadding()
    },
    handelType_b(v) {
      this.loadding()
    },
    handelGoodsState(v) {
      this.loadding()
    },
    handelType_a(v) {
      this.loadding()
    },
    loadding() {
      this.dialogShow = true
      const data = {
        shopId: localStorage.getItem('shopId'),
        page: this.pages.pageIndex,
        limit: this.pages.pageSize
      }
      recoveryList(data).then(inf => {
        this.dialogShow = false
        this.collectionList = inf.data.data.data
        if (this.selectList.length > 0) {
          this.collectionList.forEach(item => {
            this.selectList.forEach(inf => {
              if (item.id == inf.id) {
                this.$nextTick(() => {
                  this.$refs.collectionTable.toggleRowSelection(item)
                })
              }
            })
          })
        }
        this.pages.total = inf.data.data.total
      })
        .catch(err => {
          this.dialogShow = false
          console.log(err)
        })
    },
    /**  显示条目
     *  @param size 一页显示的条目
     */
    handleSizeChange(size) {
      this.pages.pageSize = size
      this.loadding()
      this.$emit('handleSizeChange', size)
    },
    setSelectList(list) {
      this.selectList = list
      this.Refresh()
    },
    handelClose() {
      this.$emit('handelClose')
    },
    /**  当前页
     *  @param index 显示页
     */
    handleCurrentChange(index) {
      this.pages.pageIndex = index
      this.loadding()
      this.$emit('handleCurrentChange', index)
    },
    /**  搜索
     *  @param val 搜索值
     */
    handelSearch() {
      this.loadding()
    },
    handelAllSelect() {
      if (this.selectList.length > 0) {
        this.$emit('handelAllSelect', this.selectList)
      } else {
        this.$message.warning('请先选择回收点')
      }
    },
    /**  添加
     *  @param row 行数据
     */
    handelAllRow() {
      this.$refs.collectionTable.toggleAllSelection()
    },
    handleSelectionChange(row) {
      this.selectList = row
      this.$emit('selectionChange', row)
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.collection {
  ::v-deep.el-dialog {
    .el-dialog__body {
      padding-bottom: 0;
    }
    .cus-data {
      display: flex;
      .left {
        width: 150px;
        height: 150px;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex-grow: 1;
        .form-last-item-0 {
          margin-top: -20px;
          p {
            margin: 0;
          }
        }
        .form-last-item-1 {
          margin-top: 50px;
          .el-button {
            width: 200px;
          }
        }
      }
    }
    // 添加商品的style
    .def-b {
      border-left: 4px solid rgb(55, 131, 255);
      padding-left: 10px;
    }
    .ele-key-search {
      display: flex;
      justify-content: space-between;
      .el-select {
        width: 120px;
      }
      .left {
        .goodsType {
          margin-left: 15px;
        }
      }
      .left,
      .right {
        display: flex;
        justify-content: flex-start;
      }
    }
    .ele-table {
      margin-top: 40px;
      .column-commodity {
        display: flex;
        align-items: flex-start;
        div:first-child {
          width: 60px;
          height: 60px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        div:last-child {
          span {
            margin-left: 20px;
          }
        }
      }
    }
    .ele-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 30px 0px;
      .left {
        .el-button {
          width: 100px;
        }
      }
    }
  }
}
</style>
